<template>
  <div class="errorpage"  @click="gotoPage('guide')" id="bgstar" ref="bgstar">
      <img :src="require('@/assets/images/404.png')" class="errorimg" alt="">
      <van-circle  
      class="myend" 
      size="100px" 
      v-model="currentRate" 
      :rate="rate" 
      :speed="20" 
      :text="text" />


    <span v-for="(l,i) in spanNum" :key="i" class="span-dots"
      :style='{
        top:l.y,
        left:l.x,
        backgroundColor:l.rgb,
        animationDelay:l.rate+"s",
        transform:`scale(${l.scaler})`
      }'
    >

    </span>

  </div>
</template>

<script>
// layer-color="#f50" 
export default {
  data(){
    return {
       currentRate:0,
       timer:null,
       rate:100,
       spanNum:[]
    }
  },
  watch:{
    currentRate(v){
      if(v==100){
          this.gotoPage('guide')
      }
    }
  },
  methods:{
    spanInits(){
      var screenW = document.getElementById("bgstar").clientWidth
      var screenH = this.$refs.bgstar.clientHeight
      console.log(screenW,screenH)
      for(var i = 0;i<550;i++){
        // 随机位置
        var x = Math.floor(Math.random() * screenW)
        var y = Math.floor(Math.random() * screenH)
        // 随机大小
        var scaler = Math.random() * 1.5 
        // 随机频率 
        var rate = Math.random() * 2.5 
        // 随机颜色
        var r = Math.floor(Math.random() * (255-0) )
        var g = Math.floor(Math.random() * (255-0) )
        var b = Math.floor(Math.random() * (255-0) )
        this.spanNum.push({
          x:x+'px',
          y:y+'px',
          rate:rate,
          scaler:scaler,
          rgb:`rgb(${r},${g},${b})`
        })
      }
    }
  },
  created(){
    // this.spanInits() 都是虚拟DOM
  },
  computed:{
    text(){
      return this.currentRate.toFixed(0) + "%"
    }
  },
  mounted(){
      this.spanInits()
  }
}
</script>


<style lang="scss" scoped>
  .errorpage{
    width:100%;
    height:100%;
    background: rgba(0,0,0,1);
    position: relative;
    overflow: hidden;
    .errorimg{
      width:220px;
      height:220px; 
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
    }
    .myend{
      position: absolute;
      top:20px;
      right:20px;
      ::v-deep .van-circle__text{
        color:#f50;
      }
    }


    .span-dots{
        position: absolute;
        animation: flash 3s alternate  infinite;
        width:3px;
        height:3px;
        border-radius: 50%;
    }

    @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
  }
</style>
